@border-color: #efefef;

@todo-hover-bgcolor: whitesmoke;

@todo-text-color: #34373d;

@todo-text-today-color: #465efc;

@todo-text-weight: 400;

@todo-notes-color: #767678;

@todo-notes-today-color: #465efc;

@todo-done-color: #848484;

ul.todos {
  overflow-y: auto;
  max-height: 75%;
  padding: 0 10px;

  .todo {
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid @border-color;

    &:hover {
      background: @todo-hover-bgcolor;
    }

    i {
      display: inline-block;
      height: 24px;
      width: 24px;
      cursor: pointer;
      margin: 0 5px 0 10px;
    }

    i.check {
      background: url("../../assets/imgs/check_default.png") no-repeat;

      &:hover {
        background: url("../../assets/imgs/check_hover.png") no-repeat;
      }
    }

    i.checked {
      background: url("../../assets/imgs/check_on.png") no-repeat;
    }

    .todo-wrapper {
      display: inline-block;
      line-height: 18px;
      padding-top: 6px;

      .todo-text {
        font-size: 15px;
        color: @todo-text-color;
        font-weight: @todo-text-weight;
      }

      .todo-text-done {
        text-decoration: line-through;
        color: @todo-done-color !important;
      }

      .todo-today {
        color: @todo-text-today-color;
      }

      .todo-notes {
        font-size: 13px;
        color: @todo-done-color;

        .today {
          color: @todo-notes-today-color;
        }

        i.dot {
          color: gray;
          margin: 0 -5px 0 5px;
        }
      }
    }
  }
}
